import router from '@system.router';
import prompt from '@system.prompt';

var size;
var refresh1, refresh2;
var lighting = [];
var text = '1024';
var textColor = ['#ff9696', '#95ff78', '#ff8ef9', '#78fbff']
var bgColor = ['#320000', '#0e3200', '#240023', '#002526']
var shine = [true,true,true,true,true,true,true,true,true,true,false,true,true,true,true,true,true,true,
        true,true,true,false,true,false]
var now = 0;

export default {
    data: {
        loading: false
    },

    async onShow(){
        //获取画板大小，为了让文字绘制居中
        setTimeout(()=>{
            size = this.$refs.H.getBoundingClientRect()

            //绘制Harmony
            this.shiningHarmony()

            //闪烁刷新
            refresh2 = setInterval(()=>{
                this.shiningHarmony()
            }, 100)

            //绘制1024，流水灯刷新
            lighting = [true, false, false, false]
            this.draw1024()
            refresh1 = setInterval(()=>{
                this.draw1024()
            }, 500)
        }, 100)

    },

    shiningHarmony(){
        //获取画板示例
        let ctx = this.$refs.H.getContext('2d', {antialias: true})

        //第一步，绘制底部黑色，为了去除上次绘制的内容
        ctx.lineWidth = 10
        ctx.strokeStyle = '#000000'
        ctx.font = '80px italic monospace'
        //设置文本从垂直中部定位
        ctx.textBaseline = 'middle'
        //设置文本以横向中部定位
        ctx.textAlign = 'center'
        ctx.strokeText('Harmony', size.width / 2, 50)

        //如果本次为显示，则绘制白色字体，白色稍小，被黑色包围
        if(shine[now]) {
            ctx.lineWidth = 5
            ctx.strokeStyle = '#ffffff'
            ctx.strokeText('Harmony', size.width / 2, 50)
            ctx.fillStyle = '#000000'

            //再次绘制更小的字，使其只有白色的描边，其实也可以直接画描边字体
            ctx.fillText('Harmony', size.width / 2, 50)
        }
        now ++;
        if(now >= shine.length) now = 0
    },

    draw1024(){
        //获取画板实例
        let ctx = this.$refs.H.getContext('2d', {antialias: true})
        ctx.font = '100px italic monospace'

        //设置文本以中心定位
        ctx.textBaseline = 'middle'
        ctx.textAlign = 'center'
        for(let i=0;i<4;i++){
            //获取该字体的背景颜色
            ctx.strokeStyle = bgColor[i]
            //绘制底部暗色背景
            ctx.lineWidth = 10
            ctx.strokeText(text[i], size.width / 2 + (i - 1.5) * 70, 140)

            //如果流水灯流到该字体，绘制亮色字体
            ctx.lineWidth = 4
            if(lighting[i]) {
                ctx.strokeStyle = textColor[i]
                ctx.strokeText(text[i], size.width / 2 + (i - 1.5) * 70, 140)
            }

            //绘制中心黑色，让其描边效果
            ctx.fillStyle = '#000000'
            ctx.fillText(text[i], size.width / 2 + (i - 1.5) * 70, 140)
        }

        //流水灯流水到下一个字
        lighting = lighting.slice(3).concat(lighting.slice(0,3))
    },

    async toGame(){
        this.loading = true

        //获取权限
        let res = await FeatureAbility.startAbilityForResult({bundleName:'com.example.funny1024',
        abilityName:'com.example.funny1024.Permission'})
        let data = JSON.parse(res.data)
        if(data.parameters.res){
            //启动service去连接另一设备
            let result = await FeatureAbility.callAbility({
                bundleName:'com.example.funny1024',
                abilityName:'com.example.funny1024.connect',
                messageCode: 0,
                abilityType: 0,
                syncOption: 0
            })
            if(result == 'true'){
                //连接成功，进入游戏
                router.push({uri: 'pages/game/game'})
            }else{
                prompt.showToast({message:'设备连接失败或没有设备'})
            }
        }else{
            prompt.showToast({message:'没有权限'})
        }
        this.loading = false
    },

    onHide(){
        //清除闪烁计时器
        clearInterval(refresh1)
        clearInterval(refresh2)
    }
}
